<template>
    <div id="articlePublish">
      <div class="flexbox">
        <el-select v-model="category" placeholder="请选择所属分类" style="margin-right: 10px;" @change="show" >
          <el-option
            v-for="item in allCategories"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-input
          type="text"
          placeholder="请输入标题..."
          v-model="title"
          maxlength="100"
          show-word-limit
        style="margin-right: 10px">
        </el-input>
        <el-button type="info" plain @click="handleSave">保存草稿</el-button>
        <el-button type="primary" @click="handlePublish">发表文章</el-button>
      </div>
      <mavonEditor style="height: 500px;" v-model="content"/>
    </div>
</template>

<script>
  import { mavonEditor } from 'mavon-editor'
  // 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
  import 'mavon-editor/dist/css/index.css'
    export default {
        name: "ArticlePublish",
      components: {
        mavonEditor
      },
      data(){
          return{
            a:"preview",
            title:'',
            content:'',
            allCategories: [],
            category: '',
            id:'',
          }
      },
      mounted(){
        const _this = this;
        this.axios({
          method:'post',
          url:"http://localhost:8081/getAllCategory",
        }).then(function (resp) {
          _this.allCategories=resp.data;
          var i = _this.$route.query.title;
          if(i != null && i != '' && i != undefined){
            _this.title=_this.$route.query.title;
            _this.category=parseInt(_this.$route.query.categoryId);
            _this.id=_this.$route.query.id;
            _this.content=_this.$route.query.content;
          }
        });
      },
      methods:{
        show(){
          console.log("打印一下："+this.category);
        },
        showResult(resp){
          if(resp.data.status==200){
            this.$message({
              type: 'success',
              message: resp.data.info
            });
            this.$router.push({path: '/articleList'});
          }else{
            this.$message({
              type: 'error',
              message: resp.data.info
            });
          }
        },
        update(state){
          const _this = this
          this.axios({
            method: 'post',
            url: "http://localhost:8081/updateArticleById",//填写url地址
            params: {
              'id': _this.id,
              'content': _this.content,
              'cid': _this.category,
              'title': _this.title,
              'state': state
            }
          }).then(function (resp) {
            _this.showResult(resp);
          })
        },
        insert(state){
          const _this = this
          this.axios({
            method: 'post',
            url: "http://localhost:8081/insertArticle",//填写url地址
            params: {
              'author': 1,
              'content': _this.content,
              'category': _this.category,
              'title': _this.title,
              'state': state
            }
          }).then(function (resp) {
            _this.showResult(resp);
          })
        },
        handleSave(){
          if(this.title==null||this.title==undefined||this.title==''){
            this.$alert('请输入文章标题', '提示', {
              confirmButtonText: '确定',
              type:"warning"
            });
          }else{
            if(this.category==''){
              this.$alert('请选择文章所属分类', '提示', {
                confirmButtonText: '确定',
                type:"warning"
              });
            }else {
              if(this.id==null||this.id==undefined||this.id==''){
                this.insert('草稿');
              }else{
                this.update('草稿');
              }
            }
          }
        },
        handlePublish(){
          if(this.title==null||this.title==undefined||this.title==''){
            this.$alert('请输入文章标题', '提示', {
              confirmButtonText: '确定',
              type:"warning"
            });
          }else{
            if(this.category==''){
              this.$alert('请选择文章所属分类', '提示', {
                confirmButtonText: '确定',
                type:"warning"
              });
            }else{
              if(this.id==null||this.id==undefined||this.id==''){
                this.insert('发表');
              }else{
                this.update('发表');
              }
            }
          }
        }
      }
    }
</script>

<style scoped>
  #articlePublish{
    width:calc(100% - 20px) ;
    padding: 20px 10px;
  }
  .flexbox{
    display: flex;
    margin-bottom: 10px;
  }
</style>
